<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>幸运大转盘  - PHP+AJAX实现</title>
    <style type="text/css">

        .demo { height: 417px; margin: 50px auto; position: relative; width: 417px;}
        #disk { background: url("https://www.helloweba.net/demo/lottery/disk.jpg") no-repeat; height: 417px; width: 417px;}
        #start { height: 320px; left: 130px; position: absolute; top: 46px; width: 163px;}

    </style>

    <script type="text/javascript" src="../js/plug/jq/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="https://www.helloweba.net/demo/lottery/jQueryRotate.2.2.js"></script>
    <script type="text/javascript" src="https://www.helloweba.net/demo/lottery/jquery.easing.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#startbtn").click(function(){
                lottery();
            });
        });
        function lottery() {
            $.getJSON('index.php',function (data) {
                json = eval(data);
                $("#startbtn").unbind('click').css("cursor","default");
                var a = json.angle; //角度
                var p = json.prize; //奖项
                $("#startbtn").rotate({
                    duration:3000, //转动时间
                    angle: 0,
                    animateTo:1800+a, //转动角度
                    easing: $.easing.easeOutSine,
                    callback: function(){
                        var con = confirm('恭喜你，中得'+p+'\n还要再来一次吗？');
                        if(con){
                            lottery();
                        }else{
                            //再次绑定click事件
                            $("#startbtn").css("cursor","pointer").on("click",function(){
                                lottery();
                            });
                            return false;
                        }
                    }
                });
            })
        }
    </script>
</head>
<body>

<div class="demo">
    <div id="disk"></div>
    <div id="start"><img id="startbtn" src="https://www.helloweba.net/demo/lottery/start.png" style="cursor: pointer; transform: rotate(0deg);"></div>
</div>

</body>
</html>